<template>
  <a-layout :class="['layout', device]">
    <a-drawer v-if="isMobile()" placement="left" style="width:220px" :wrapClassName="`drawer-sider ${'light'}`" :closable="false" :visible="sideCollapsed" @close="drawerClose">
      <side-menu :isheade="false" mode="inline" :menus="menus" :theme="'light'" :collapsed="false" :collapsible="true" @menuSelect="menuSelect"></side-menu>
    </a-drawer>
    <a-layout :class="[layoutMode, `content-width-${contentWidth}`]" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
      <global-header :mode="layoutMode" :menus="headMainMenus" :theme="navTheme" :collapsed="collapsed" :device="device" @toggle="toggle" @mainMenuSelect="mainMenuSelected" />
      <a-layout :style="{ paddingTop: fixedHeader ? '64px' : '0' }">
        <side-menu v-show="sideChildMenus.length > 0" :isheade="false" mode="inline" :menus="this.sideChildMenus" :theme="'light'" :collapsed="collapsed" :collapsible="true" @toggleSidder="toggleSidder"></side-menu>
        <!-- <a-layout-content :style="{ height: '100%', margin: '24px 24px 0', background: '#fff' }"> v0830-->
        <a-layout-content id="_content" :style="{ position: 'relative', background: '#fff' }">
          <multi-tab v-if="multiTab"></multi-tab>
          <water-mark :inputText="nickname"> </water-mark>
          <!-- <page-toggle-transition style="background-color:#fff" :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction"> -->
          <route-view />
          <!-- </page-toggle-transition> -->
        </a-layout-content>
      </a-layout>
      <!-- <a-layout-footer>
        <global-footer />
      </a-layout-footer> -->
      <!-- <setting-drawer v-if="!production"></setting-drawer> -->
    </a-layout>
  </a-layout>
</template>
<script>
import PageToggleTransition from '@/components/transition/PageToggleTransition'
import { triggerWindowResizeEvent, addWater } from '@/utils/util'
import { mapState, mapActions, mapGetters } from 'vuex'
import { mixin, mixinDevice } from '@/utils/mixin'
import config from '@/config/defaultSettings'

import RouteView from './RouteView'
import SideMenu from '@/components/Menu/SideMenu'
import GlobalHeader from '@/components/GlobalHeader'
import GlobalFooter from '@/components/GlobalFooter'
import SettingDrawer from '@/components/SettingDrawer'
import { convertRoutes } from '@/utils/routeConvert'
import WaterMark from '@/components/WaterMark/waterMark'

export default {
  name: 'BasicLayout',
  mixins: [mixin, mixinDevice],
  components: {
    RouteView,
    SideMenu,
    GlobalHeader,
    GlobalFooter,
    SettingDrawer,
    PageToggleTransition,
    WaterMark
  },
  data() {
    return {
      production: config.production,
      collapsed: false,
      sideCollapsed: false,
      headMainMenus: [],
      sideChildMenus: [],
      isclick: false,
      menus: []
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      mainMenu: state => state.permission.addRouters
    }),
    ...mapGetters(['nickname']),
    contentPaddingLeft() {
      if (!this.fixSidebar || this.isMobile()) {
        return '0'
      }
      if (this.sidebarOpened) {
        return '256px'
      }
      return '80px'
    }
  },
  watch: {
    sidebarOpened(val) {
      this.collapsed = !val
    },
    $route: function(newVal) {
      // const matchedRoutes = newVal.matched.filter(item => item.path !== '')
      // this.mainMenuSelected(matchedRoutes[0].path)
    }
  },
  created() {
    const routes = convertRoutes(this.mainMenu.find(item => item.path === '/'))
    this.headMainMenus = []
    var _headMainMenus = []
    this.menus = (routes && routes.children) || []
    this.menus.forEach(a => {
      _headMainMenus.push({
        path: a.path,
        name: a.name,
        redirect: a.redirect,
        // component: a.component,
        meta: a.meta
      })
    })
    console.log(_headMainMenus)
    this.collapsed = !this.sidebarOpened
    // 2022-09-30 取消注释
    this.mainMenuSelected(_headMainMenus[0].path)
    this.headMainMenus = _headMainMenus
  },
  mounted() {
    addWater(this.nickname)
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Edge') > -1) {
      this.$nextTick(() => {
        this.collapsed = !this.collapsed
        setTimeout(() => {
          this.collapsed = !this.collapsed
        }, 16)
      })
    }
  },
  methods: {
    ...mapActions(['setSidebar']),
    toggle() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    toggleSidder() {
      this.collapsed = !this.collapsed
      this.setSidebar(!this.collapsed)
      triggerWindowResizeEvent()
    },
    mainMenuSelected(data) {
      this.isclick = true
      this.sideChildMenus = []
      this.sideChildMenus = this.menus.filter(a => {
        if (a.name === data.substr(1)) {
          return a.children
        }
      })
      this.sideChildMenus = this.sideChildMenus.length > 0 ? this.sideChildMenus[0].children : []
      this.sideChildMenus = this.sideChildMenus.filter(a => a.path != '/analysis/chart') // 20210120 去除中转页面
    },
    paddingCalc() {
      let left = ''
      if (this.sidebarOpened) {
        left = this.isDesktop() ? '256px' : '80px'
      } else {
        left = (this.isMobile() && '0') || (this.fixSidebar && '80px') || '0'
      }
      return left
    },
    menuSelect() {},
    drawerClose() {
      this.collapsed = false
    }
  }
}
</script>

<style lang="less">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
</style>
<style lang="less" scoped>
/deep/.ant-drawer-content-wrapper {
  width: unset;
}
</style>

<style lang="less" scoped>
.notclickn {
  pointer-events: none;
}

.viewless {
  /deep/.ant-input-number {
    border: none;
    background: transparent;
  }

  /deep/.ant-input {
    border: none;
    background: transparent;
  }

  .ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /deep/.ant-input-disabled {
    color: rgba(0, 0, 0, 0.65);
    cursor: default;
  }

  /deep/.ant-select-disabled {
    color: rgba(0, 0, 0, 0.65);
  }

  // /deep/.ant-modal-content {
  //   pointer-events: unset;
  // }
  /deep/.ant-select-selection--single {
    border: none;
    background: transparent;
  }

  /deep/.ant-select-arrow .ant-select-arrow-icon {
    display: none;
  }

  /deep/.anticon {
    display: none;
  }

  /deep/.vue-treeselect div,
  .vue-treeselect span {
    border: none;
  }

  /deep/.vue-treeselect__x-container {
    display: none;
  }

  /deep/.vue-treeselect__control-arrow-container {
    display: none;
  }
}
</style>
